import React, {Component} from 'react';
import {Layout, Menu, Breadcrumb} from 'antd';
// import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons';
import './ZhouKao2.css'
import routes, {getNavData} from '../../router/router-config'
import RouterView from "../../router/RouterView";
// import {Switch as SwitchRouter, Route, Redirect} from 'react-router-dom'
// import System from "./System";
import {withRouter} from 'react-router-dom'

const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;

/*
  后台管理系统  OA CMS(京东  淘宝) ...
  上 Header
* 左 Menu
* 右 RouterView
* */

class ZhouKao2 extends Component {
  render() {
    return (
      <Layout>
        <Header className="header">
          <div className="logo"/>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Layout>

          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{height: '100%', borderRight: 0}}
            >
              {
                getNavData(routes).map((item, index) => {
                  return item.children ? <SubMenu key={index} title={item.title}>
                      {getNavData(item.children).map((key, ind) => {
                        return <Menu.Item
                          key={key.path}
                          onClick={() => {
                            console.log(key.path)
                            this.props.history.push(key.path)
                          }}
                        >
                          {key.title}
                        </Menu.Item>
                      })}
                    </SubMenu> :
                    <Menu.Item
                      key={item.path}
                      onClick={() => {
                        console.log(item.path)
                        this.props.history.push(item.path)
                      }}
                    >
                      {item.title}
                    </Menu.Item>
                })
              }

            </Menu>
          </Sider>
          <Layout style={{padding: '0 24px 24px'}}>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              <RouterView routes={routes}>

              </RouterView>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}


export default withRouter(ZhouKao2);
